<template>
    <div class="card-box">
        <v-dialog
            title="预览"
            :show.sync="dialogVisible"
            width="1200px"
        >
            <div style="padding-bottom: 15px" class="page-box">
                <el-form v-model="item" class="form-wrap" :rules="rules">
                    <div class="data-title full mb12" >基本信息</div>
                    <el-form-item label="模板名称"  style="width: 40%">
                        <el-input v-model="item.templateName"></el-input>
                    </el-form-item>
                    <el-form-item label="适用项目"  style="width: 40%">
                        <el-input v-model="item.project"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="page-box" id="printTemplate">
                <el-row class="">
                    <span style="font-size: 18px">单据痕迹：</span>原单
                </el-row>
                <el-row style="text-align: center;padding-bottom: 20px">
                    <span style="font-size: 30px">福田物业</span>
                </el-row>
                <el-row class="row" style="text-align: right">
                    <span>NO:</span><el-input v-model="item.financeManageReceiptDetailVO.receiptNum" type="text" style="width: 10%"></el-input>
                </el-row>
                <el-row class="row">
                    <el-col :span="8">
                        <span>客户：</span><el-input v-model="item.financeManageReceiptDetailVO.client" type="text" style="width: 30%"></el-input>
                    </el-col>
                    <el-col :span="8" style="text-align: center">
                        <span>房间：</span><el-input type="text" v-model="item.financeManageReceiptDetailVO.room" style="width: 30%"></el-input>
                    </el-col>
                    <el-col :span="8" style="text-align: right">
                        <span>时间：</span>
                        <el-date-picker
                            v-model="item.financeManageReceiptDetailVO.printDate"
                            type="date"

                            style="width: 50%"></el-date-picker>
                    </el-col>
                </el-row>
                <el-table :data="item.financeManageReceiptDetailVO.financeManageReceiptPayments " show-summary="true" class="data-info">
                    <el-table-column label="序号" type="index" :index="indexMethod" width="80"></el-table-column>
                    <el-table-column label="款项" prop="fund">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.fund"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="摘要" prop="digest" >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.digest"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="费用期间" width="180" prop="costDate">
                        <template slot-scope="scope">
                            <el-date-picker type="date"
                                            value-format="yyyy-MM-dd"
                                            format="yyyy-MM-dd"
                                            v-model="scope.row.costDate"></el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column label="单价" prop="unitPrice">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.unitPrice"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="数量" prop="number">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.number"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="本金" prop="capital">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.capital"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="违约金" prop="deditPrice">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.deditPrice"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="合计" prop="summation">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.summation"></el-input>
                        </template>
                    </el-table-column>

                </el-table>
                <el-row class="row" :span="24">
                    <el-col :span="6">
                        <span>收款人：</span><el-input v-model="item.financeManageReceiptDetailVO.payee" type="text" style="width: 40%"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <span>交款日期：</span>
                        <el-date-picker
                            type="date"

                            v-model="item.financeManageReceiptDetailVO.paymentDate"
                            style="width: 50%"></el-date-picker>
                    </el-col>
                    <el-col :span="6">
                        <span>交款人（签字）：</span><el-input v-model="item.financeManageReceiptDetailVO.payer"  type="text" style="width: 30%"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <span>打印日期：</span>
                        <el-date-picker
                            type="date"
                            value-format="yyyy-MM-dd"
                            v-model="item.financeManageReceiptDetailVO.printDate"
                            style="width: 50%">
                        </el-date-picker>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <span>代收单位盖章：</span><label></label>
                    </el-col>
                    <el-col :span="4">
                        <span>打印人：</span><el-input type="text" v-model="item.financeManageReceiptDetailVO.printer" style="width: 50%"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <span>打印次数：</span><el-input type="text" v-model="item.financeManageReceiptDetailVO.printNum" style="width: 50%"></el-input>
                    </el-col>
                </el-row>
            </div>
            <div style="text-align: right" class="page-box">
                <el-button type="primary" size="small" @click="print">打印</el-button>
                <el-button type="primary" size="small" @click="close">关闭</el-button>
            </div>
        </v-dialog>
    </div>
</template>

<script>
    import printJS from 'print-js'
    import Print from '~/plugins/print'
    export default {
        data(){
            return{
                dialogVisible:false,
                item:{}
            }
        },
        methods:{
            show(item){
                console.log(item)
                this.item=item[0]
                this.dialogVisible=true
            },
            print(){
                printJS({
                    printable: 'printTemplate',
                    type: 'html',
                    //properties: [
                    //    { field: 'name', displayName: '姓名', columnSize:`50%`},
                    //    { field: 'sex', displayName: '性别',columnSize:`50%`},
                    //],
                    // header: `<p class="custom-p"> 名单 </p>`,
                    maxWidth:1200,
                    style: '.no-print{width: 0px} @page{size: auto A2 portrait;margin: 3mm;} @media print {' +
                        '.card-box {margin-left: -80px;width: 100%;margin-bottom: 14mm;border-bottom: 0;}' +
                        '.data-info{} ' +
                        '} ',
                    gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                    gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
                    repeatTableHeader: true,
                    scanStyles:true,
                    targetStyles: ['*'],
                    ignoreElements:['no-print']
                })
            },
            close(){
                this.dialogVisible=false
            }
        }
    }
</script>

<style lang="scss" scoped>
    
    @include data-title();
    @include info-list();
    @include formWrap(3);
</style>
